<html> 
 
<head> 
<title>004 | Glass / Refraction, reflection, fresnel, chromatic dispersion | J3D</title> 

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

<link rel="stylesheet" href="common/common.css"/>
<script type="text/javascript" src="common/common.js"></script>
<script type="text/javascript" src="js/dat.gui.js"></script>

<!--
<script type="text/javascript" src="../lib/glMatrix.js"></script>
<script type="text/javascript" src="../lib/requestAnimationFrame.js"></script>
<script type="text/javascript" src="../src/J3D.js"></script>
<script type="text/javascript" src="../src/util/Color.js"></script>
<script type="text/javascript" src="../src/math/Vector2.js"></script>
<script type="text/javascript" src="../src/math/Vector3.js"></script>
<script type="text/javascript" src="../src/math/Matrix44.js"></script>
<script type="text/javascript" src="../src/engine/Engine.js"></script>
<script type="text/javascript" src="../src/engine/Camera.js"></script>
<script type="text/javascript" src="../src/engine/Light.js"></script>
<script type="text/javascript" src="../src/engine/Geometry.js"></script>
<script type="text/javascript" src="../src/engine/Mesh.js"></script>
<script type="text/javascript" src="../src/engine/Scene.js"></script>
<script type="text/javascript" src="../src/engine/Loader.js"></script>
<script type="text/javascript" src="../src/engine/Filter.js"></script>
<script type="text/javascript" src="../src/engine/ShaderAtlas.js"></script>
<script type="text/javascript" src="../src/engine/EffectAtlas.js"></script>
<script type="text/javascript" src="../src/engine/Texture.js"></script>
<script type="text/javascript" src="../src/engine/Cubemap.js"></script>
<script type="text/javascript" src="../src/engine/Transform.js"></script>
<script type="text/javascript" src="../src/engine/Postprocess.js"></script>
<script type="text/javascript" src="../src/engine/FrameBuffer.js"></script>
<script type="text/javascript" src="../src/engine/Primitives.js"></script>
<script type="text/javascript" src="../src/effects/EffectSource.js"></script>
<script type="text/javascript" src="../src/renderers/ShaderSource.js"></script>
<script type="text/javascript" src="../src/renderers/Phong.js"></script>
<script type="text/javascript" src="../src/renderers/Toon.js"></script>
<script type="text/javascript" src="../src/renderers/Depth.js"></script>
<script type="text/javascript" src="../src/renderers/Gouraud.js"></script>
<script type="text/javascript" src="../src/renderers/Normal2Color.js"></script>
<script type="text/javascript" src="../src/renderers/Reflective.js"></script>
<script type="text/javascript" src="../src/renderers/Glass.js"></script>
<script type="text/javascript" src="../src/renderers/Skybox.js"></script>
<script type="text/javascript" src="../src/renderers/Shader.js"></script>
<script type="text/javascript" src="../src/util/Time.js"></script>
<script type="text/javascript" src="../src/util/ShaderUtil.js"></script>
-->

<script type="text/javascript" src="../build/j3d.js"></script>

<script>
	var engine, scene;
	var root, model, camera, shader;
	var mx = 0, my = 0;

	var Properties = function() {
		this.dispersionRed = 0.90;
		this.dispersionGreen = 0.97;
		this.dispersionBlue = 1.04;
		this.bias = 0.9
		this.scale = 0.7;
		this.power = 1.1;	
	}
	
	window.onload = function(){
		if(!checkWebGL()) return;
		
		properties = new Properties();	
		
		gui = new DAT.GUI();
		gui.domElement.style.position = 'absolute';
		gui.domElement.style.top = '0px';
		gui.domElement.style.right = '140px';
		gui.domElement.style.zIndex = 200;
		document.body.appendChild( gui.domElement );
		
		gui.add(properties, 'dispersionRed').min(0.7).max(1.1);
		gui.add(properties, 'dispersionGreen').min(0.7).max(1.1);
		gui.add(properties, 'dispersionBlue').min(0.7).max(1.1);
		gui.add(properties, 'bias').min(0).max(1);
		gui.add(properties, 'scale').min(-5).max(5);
		gui.add(properties, 'power').min(0).max(20);
		
		engine = new J3D.Engine();
		
		J3D.Loader.loadGLSL("shaders/Glass.glsl", function(s) {
			shader = s;
			setup();
		});
	}
	
	function setup(){
		camera = new J3D.Transform();
		camera.camera = new J3D.Camera({far: 100});
		camera.position.z = 5;	
		engine.camera = camera;	
		
		root = new J3D.Transform();
		root.add(camera);
		engine.scene.add(root);

		cubemap = new J3D.Cubemap({
			left: "models/textures/skybox/left.jpg",
			right: "models/textures/skybox/right.jpg",
			up: "models/textures/skybox/up.jpg",
			down: "models/textures/skybox/down.jpg",
			back: "models/textures/skybox/back.jpg",
			front: "models/textures/skybox/front.jpg",
		});

		engine.scene.addSkybox(cubemap);

		
		shader.uCubemap = cubemap;
		
		model = new J3D.Transform();
		model.rotation.x = 0.2;	
		model.renderer = shader;
		J3D.Loader.loadJSON("models/skull.js", function(j) { model.geometry = new J3D.Mesh(j); } );
		engine.scene.add(model);

		document.onmousemove = onMouseMove;
		
		draw();
	}
	
	function onMouseMove(e) {
		mx = ( e.clientX / window.innerWidth  ) * 2 - 1;
		my = ( e.clientY / window.innerHeight ) * 2 - 1;
		if(isNaN(mx)) mx = 0;
		if(isNaN(my)) my = 0;
	}
	
	function draw() {
		requestAnimationFrame(draw);

		shader.chromaticDispertion = [properties.dispersionRed, properties.dispersionGreen, properties.dispersionBlue];	
		shader.bias = properties.bias;	
		shader.scale = properties.scale;	
		shader.power = properties.power;	

		root.rotation.x += (my - root.rotation.x) / 20;
		root.rotation.y += mx * J3D.Time.deltaTime / 2000;

		engine.render();
	}
	
</script>

</head> 

<body>
	<script>
		setLabels("004. Glass", "Glass shader with refraction, reflection,<br>fresnel effect and chromatic dispersion<br>Cubemap by <a href='http://www.ataricommunity.com/forums/showthread.php?t=506748'>Jockum Skoglund</a><br>Shader based on <a href='http://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter07.html'>Cg tutorial</a><br>Skull model by <a href='http://www.blendswap.com/3D-models/misc-objects/craneo/'>Daniel FR Gordillo</a>");
	</script>
	
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24294554-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</body> 

</html> 